<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="夏亚飞">
    <title>宝钢首页</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
         
        body {
            padding-top: 50px;
        }
        
        .navbar{
            background: url(image/nav-bg.png) repeat-x;
            background-color: #f8f8f8;           
        }
       
        .navbar-nav > li> a {
            padding: 15px 5px 10px;
            margin-right: 20px;
        }
        
        .navbar-nav > li> a:hover {
            text-decoration: none;
            color: black;
            border-bottom: 2px solid blue;
        }
        
        .navbar > .container .navbar-brand {
            padding: 0;
        }
        
        .navbar-form input {
            border-radius: 17px 17px;
        }
        
        .banner img{
            width: 100%;
        }
        .list-group{
            height: 270px;
            padding: 0 10px;
        }
        .row>div:nth-child(1){
            background-color: red;
            
        }
        .row>section:nth-child(2){
            background-color: yellow;
        }
        .row>section:nth-child(3){
            background-color: blue;
        }
        @media screen and (max-width:768px){
                .navbar-nav li a:hover{
                border-bottom: none;     
            }
        }
        .margin{
            margin-top: -30px;
        }
        h4{
            background-color: blue;
            color: white;
            height: 30px;
            line-height: 30px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
       
        h5{
            margin: 0;
            font-weight: bold;
            line-height: 10px;
        }
        .gsdt{
            padding-bottom: 30px;
            border-bottom: 2px dotted orange;
        }
        .kecheng{
            margin-top: 10px;
            font-size: 15px;
        }
        .kecheng a{
            color: black;
            
        }
        .aa{
            display: inline-block;
            background-color: gray;
            text-align: center;
            width: 40%;
            height: 40px;
            line-height: 40px;
        }
        .p{
            margin: 10px auto 20px auto;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
          <img src="image/logo.png" alt="">&emsp;&emsp;
      </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    
                    <li><a href="#">首页</a></li>
                    <li><a href="#">媒体中心</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">业务板块</a></li>
                    <li><a href="#">产品服务</a></li>
                </ul>
                <form class="navbar-form navbar-right visible-lg">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div>
        </div>
    </nav>
 
    <div class="banner">
        <img src="image/banner.png" alt="">
    </div>
    <!--内容部分-->
    <!--?????????margin-top:-30px;-->
    <div class="container margin">
        <div class="row">
            <!--?????.col-sm-12????-->
            <div class="list-group col-md-4 " >
                <div class="gsdt clearfix">
                <h4 class="list-group-item-heading">公司动态</h4>
                <img src="image/news.png" alt="" class="col-md-4 pull-left">
                <section class="centent-p col-md-8 pull-right"><h5>Bootstrap</h5>今天我们在做宝钢的首页，使用了bootstrap中组件中的导航条内容和栅格系统</section>
                <div class="content-border pull-right"><a href="">READMORE</a></div>
                </div>

                <div class="kecheng"><a href="">HTML5</a><span class="pull-right">2017-4-17</span></div><br>
                <div class="kecheng"><a href="">CSS3</a><span class="pull-right">2017-4-17</span></div><br>
                <div class="kecheng"><a href="">JS</a><span class="pull-right">2017-4-17</span></div>
            </div>
            <section class="list-group col-md-4 ">
                <div class="gsdt clearfix">
                <h4 class="list-group-item-heading">研究与观点</h4>
                <section><h5>HTML5</h5>HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本。</section>
                <div class="content-border pull-right"><a href="">READMORE&lt;&lt;</a></div>
                </div>
                <div class="kecheng" style="position:reletive;">
                <section><h5>HTML5</h5>HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本，HTML5是html的第五个版本。</section>
                <div class="content-border" style="position:abslute;bottom:0;left:0;"><a href="" >READMORE</a></div>
                </div>
            </section>
            <section class="list-group col-md-4" id="cpfw">
                <h4 class="list-group-item-heading">产品与服务</h4>
                <img src="image/service.png" alt="" class="container" style="width:100%;height:100px">
                <div class="content-border"></div>
                <p class="clearfix p"><a href="" class="aa">HTML5</a><a href="" class="pull-right aa">CSS5</a></p>
                <p class="clearfix p"><a href="" class="aa">JS</a><a href="" class="pull-right aa">JQ</a></p>

                
                
 
            </section>
        </div>
    </div>





    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>